import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Flex, WhiteSpace } from 'antd-mobile';
import styles from '../styles.less';

const Diagnosis = ({ dispatch, location, ...rest }) => {
  const links = [{
    path: 'family',
    className: 'diagLook',
    text: '智能舌镜',
    icon: require('../../../assets/icons/icon-pick.svg'),
  }, {
    path: 'scale',
    className: 'diagQuestion',
    text: '测评量表',
    icon: require('../../../assets/icons/icon-sheets.svg'),
  }];

  // 
  const goto = (link) => {
    dispatch(routerRedux.push({
      pathname: `${location.pathname}/${link.path}`,
      state: { 
        title: link.text,
      },
    }));
  };

  return (
    <div className={styles.diagList}>
      <ul>
        {links.map((link, i) =>
          <li
            key={i}
            className={styles[link.className]}
            onClick={() => goto(link)}>
            <img src={link.icon} />
            <p>
              {link.text}
            </p>
          </li>
        )}
      </ul>
    </div>
  );
};

export default connect()(Diagnosis);
